<template>
  <div>
    <div class="filter-header">
      <el-form :inline="true" class="search-bar">
        <el-form-item>
          <el-select
            v-model="selectedCategory"
            placeholder="选择分类"
            style="width: 100px"
          >
            <el-option
              v-for="item in categoryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchInput" placeholder="输入查询内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleClick">查询</el-button>
        </el-form-item>
      </el-form>

      <div class="media-type-container">
        <el-form-item class="media-type-group">
          <el-radio-group v-model="mediaType">
            <el-radio-button label="all">全部</el-radio-button>
            <el-radio-button label="image">影像情报</el-radio-button>
            <el-radio-button label="audio">声音情报</el-radio-button>
            <el-radio-button label="video">视频情报</el-radio-button>
            <el-radio-button label="document">文档情报</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-button type="text" @click="toggleFilters">
          {{ showFilters ? "隐藏筛选条件" : "更多筛选条件" }}
        </el-button>
      </div>
    </div>

    <el-divider></el-divider>

    <div v-if="showFilters">
      <h3>筛选条件</h3>
      <el-form :model="searchForm" label-width="100px">
        <el-form-item label="情报日期">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="数据分类">
          <el-select v-model="searchForm.category">
            <el-option label="分类1" value="1"></el-option>
            <el-option label="分类2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input
            v-model="searchForm.keyword"
            placeholder="输入关键字"
          ></el-input>
        </el-form-item>
        <el-form-item label="数据来源">
          <el-input
            v-model="searchForm.source"
            placeholder="输入数据来源"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineEmits } from "vue";
const emit = defineEmits(['button-clicked']);
const selectedCategory = ref("all");
const showFilters = ref(false);
const searchInput = ref("");
const mediaType = ref("all");
const searchForm = ref({
  dateRange: [],
  category: "",
  keyword: "",
  source: "",
});

// 下拉选项
const categoryOptions: any = ref([
  { label: "全部", value: "all" },
  { label: "标题", value: "title" },
  { label: "正文", value: "content" },
  { label: "摘要", value: "summary" },
  { label: "关键词", value: "keywords" },
]);

// 切换筛选器可见性
const toggleFilters = () => {
  showFilters.value = !showFilters.value;
};

const handleClick = ()=>{
  // 查询按钮触发
  emit('button-clicked');// 使用 emit 触发事件
}
</script>

<style lang="scss" scoped>

</style>
